<template>
	<div class="xw-header">
		<div>
			{{title || $route.meta.title}}
		</div>
		<div class="xw-header_right">
			<el-button round type="primary">添加</el-button>
			<el-tooltip content="表格斑马纹" placement="top">
				<el-switch v-model="switchValue" @change="switchChange">
				</el-switch>
			</el-tooltip>
			<el-tooltip content="全屏" placement="top">
				<i class="el-icon-full-screen" @click="launchFullscreen"></i>
			</el-tooltip>
			<!-- <el-button round>导出</el-button> -->
		</div>
	</div>
</template>

<script>
	import {
		launchFullscreen,
		exitFullscreen
	} from '@/utils'
	export default {
		props: {
			title: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				switchValue: false
			}
		},
		methods: {
			switchChange(e) {
				this.$emit('switchChange', e)
			},
			launchFullscreen() {
				const element = document.getElementsByClassName('AppMain_contnet')[0]
				const a = element.getElementsByTagName('div')[0]
				console.log(a)
				if (!!!document.fullscreenElement) {
					launchFullscreen(a)
				} else {
					exitFullscreen()
				}

			},
		}
	}
</script>

<style lang="scss">
	.xw-header {
		padding: 0 15px;
		height: 50px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&_right {
			>* {
				margin-right: 15px;
			}
		}
	}
</style>